<template>
  <el-submenu v-if="item.childList && item.childList.length" :index="item.router" class="childSubMenu">
    <!-- 创建父级菜单 -->
    <template slot="title">
      <i :class="[item.icon]"></i>
      <span slot="title">{{item.name}}</span>
    </template>
    <!-- 创建子菜单 -->
    <nav-item v-for="subItem of item.childList" :key="subItem.id" :item="subItem"></nav-item>
  </el-submenu>
  <el-menu-item v-else :key="item.id" :index="item.router"  :route="{name:item.router}" class="flex-centet-between">
   <i class="el-icon-tickets"></i>
    <span>{{item.name}}</span>
    <!-- <i class="fs20 icon star-icon" :class="[item.isCollect==true?'el-icon-star-on':'el-icon-star-off']" style="color:#ffd04b" @click.stop="collection(item)"></i> -->
  </el-menu-item>
</template>

<style scoped>

.is-active:hover {
  /* background: #1890ff !important; */
}
</style>

<script>
import server from '@/service/index'
import { setCookie } from '@/assets/utils'
export default {
  name: 'navItem',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  methods: {

    setNavName(item) {
      this.$store.dispatch('setNavName', item);
      setCookie('navName', item)
    },

    //收藏菜单
    async collection(item) {
      if (item.isCollect) {
        return;
      }
      let result = await server.haiheiServerCollectMenu({
        menuId: item.id
      });
      if (result.success) {
        item.isCollect = true;
        console.log(item)
        this.$store.dispatch('setMenuItem', item)
      }
    }
  }

}



</script>
